<template>
    <el-container style="height:100%; border: 0px solid #000">
      <el-main>
        <el-row>
          <el-col :span="4">
            <el-input placeholder="请输入关键字" v-model="serach">
              <el-button slot="append" icon="el-icon-search" @click="requestGridData"></el-button>
            </el-input>
          </el-col>
          <el-col :span="6">
            <el-button :disabled="isdisabled" @click="disableBtnClick" plain>{{$t('naming.disable')}}</el-button>
            <el-button :disabled="isdisabled" @click="publishBtnClick" plain>{{$t('naming.ispublish')}}</el-button>
            <el-button type="primary" icon="el-icon-plus" @click="addBtnClick"></el-button>
          </el-col>
        </el-row>
        <el-table
          :data="tableData"
          ref="naming"
          stripe
          :height="tableHeight"
          style="width: 100%;"
          border
          v-loading="loading"
          element-loading-text="数据加载中。。。"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(255, 255, 255, 0.8)"
          @selection-change="handleSelectionChange">
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="id" v-if="false" label="主键" ></el-table-column>
          <el-table-column prop="name" :label="$t('naming.name')"></el-table-column>
          <el-table-column prop="applyObject" :label="$t('naming.apply_obeject')" :formatter="applyObject"></el-table-column>
          <el-table-column prop="ruleContent" :label="$t('naming.rulecontent')"></el-table-column>
          <el-table-column prop="maxNameLength" :label="$t('naming.name_max_length')"></el-table-column>
          <el-table-column prop="remark" :label="$t('naming.remark')"></el-table-column>
          <el-table-column prop="status" :label="$t('naming.state')" :formatter="status"></el-table-column>
          <el-table-column prop="createTime" :label="$t('naming.createtime')" :formatter="formatter"></el-table-column>
          <el-table-column prop="updateTime" :label="$t('naming.updatetime')" :formatter="formatter"></el-table-column>
          <el-table-column prop="creator" :label="$t('naming.creator')"></el-table-column>
          <el-table-column :label="$t('base.action')">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  icon="el-icon-edit"
                  @click="handleEdit(scope.$index, scope.row)"
                ></el-button>
              <el-popover placement="top" :ref="'popover-'+ scope.row.id">
                <p>确定删除吗？</p>
                <div style="text-align: right; margin: 0">
                  <el-button
                    size="mini"
                    type="text"
                    @click="handleDelete(false,scope.$index, scope.row)"
                  >取消</el-button>
                  <el-button
                    type="primary"
                    size="mini"
                    @click="handleDelete(true,scope.$index, scope.row)"
                  >确定</el-button>
                </div>
                <el-button slot="reference" size="mini"  icon="el-icon-delete"></el-button>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10,20, 30, 40]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          background
        ></el-pagination>
      </el-main>
    </el-container>
</template>
<script>
export default {
  //初始化数据
  data() {
    return {
      tableHeight: window.innerHeight - 180,
      serach: "",
      tableData: [
        // {
        //   name: 'oracle命名规范',
        //   applyObject : '物理模型',
        //   ruleContent : '层次_主题',
        //   maxNameLength : '32',
        //   remark:'dddd',
        //   status : '1',
        //   createTime : '2020-02-04',
        //   updateTime : '2020-02-04',
        //   creator:'admin',
        // }, 
      ],
      currentPage: 1,
      pagesize: 10,
      total: 0,
      loading: false,
      title: "",
      dialogVisible: false,
      isdisabled:true,
      multipleSelection: [],
      naming: {
        id: null,
        name: "",
        applyObject:"",
        ruleContent:"",
        maxNameLength:"",
        remark:"",
        status:"",
        createTime: "",
        updateTime: "",
        creator: "",
        
      }
    };
  },
  components: {
    //自定义标签
  },
  //方法
  methods: {
    //选中的行
    handleSelectionChange(val){
      debugger
      this.multipleSelection = val;
      if(this.multipleSelection.length == 0){
        this.isdisabled = true;
      }else{
        this.isdisabled = false;
      }
    },
    //每页显示数据个数变化时调用
    handleSizeChange(val) {
      this.pagesize = val;
      this.requestGridData();
    },
    //页码变化时调用
    handleCurrentChange(val) {
      this.currentPage = val;
      this.requestGridData();
    },
    //编辑
    handleEdit(index, row) {
      debugger
      this.$router.push({
        name:'add',
        params: {
          naming:row
        }
      })
    },
    //删除
    handleDelete(flag, index, row) {
      debugger
       this.$refs["popover-" + row.id].doClose();
      console.log(row.id);
      var _this = this;
      if (flag) {
        this.axios
          .post(this.HOST + "/del", {id:row.id})
          .then(function(res) {
            if(res.data){
              _this.$message({
                message: "操作成功!",
                type: "success"
              });
            }else{
              _this.$message({
                message: "操作失败!",
                type: "error"
              });
            }
            _this.requestGridData();
          })
          .catch(function(err) {
            _this.$message.error("操作失败" + err);
          });
      }
    },
    //新增按钮事件
    addBtnClick() {
      this.$router.push("/add");
    },
    selectRowsIdOperation(status){
      var _this = this;
      var selectRows = this.$refs.naming.selection;
      var ids = "";
      for(var i = 0 ; i < selectRows.length ; i++){
        if(i == 0){
          ids += selectRows[i].id;
        }else{
          ids += ","+selectRows[i].id;
        }
      }
     this.axios
        .post(_this.HOST + "/update/state", {
          ids:ids,
          status:status
        })
        .then(function(res) {
          if(res.data){
            _this.$message({
              type: "success",
              message: "操作成功"
            });
          }
          _this.requestGridData();
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    disableBtnClick(){
      this.selectRowsIdOperation(0);
    },
    publishBtnClick(){
       this.selectRowsIdOperation(1);
    },
    
    //请求数据
    requestGridData() {
      var _this = this;
      this.axios
        .post(this.HOST + "/list", {
          page: _this.currentPage,
          rows: _this.pagesize,
          name: _this.serach,
        })
        .then(function(res) {
          _this.tableData = res.data.data.data;
          _this.total = res.data.data.totalCount;
          _this.loading = false;
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    status(row,ele,value){
      let ms = '';
      if(value == '1'){
          ms = "发布";
      }else if(value == '0'){
         ms = "停用";
      }else if(value == '2'){
        ms = "新建"; 
      }
      return ms;
    },
    applyObject(row,ele,value){
       let ms = '';
      if(value == '0'){
          ms = "物理模型";
      }else if(value == '1'){
         ms = "物理模型属性";
      }
      return ms;
    },
    formatter (row,ele,value) {
      let fmt = "yyyy-MM-dd hh:mm:ss";
      let $this = new Date(value);
      let o = {
        'M+': $this.getMonth() + 1,
        'd+': $this.getDate(),
        'h+': $this.getHours(),
        'm+': $this.getMinutes(),
        's+': $this.getSeconds(),
        'q+': Math.floor(($this.getMonth() + 3) / 3),
        'S': $this.getMilliseconds()
      }
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, ($this.getFullYear() + '').substr(4 - RegExp.$1.length))
      }
      for (var k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) {
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
        }
      }
      return fmt
    }
  },
  //加载时调用方法 函数
  mounted() {
    this.requestGridData();
  }
};
</script>
<style scoped>
.el-col {
  margin-bottom: 10px;
}
.el-pagination {
  position: absolute;
  right: 20px;
  margin-top: 25px;
}
.el-popover__reference {
  margin-left: 10px;
}
.el-main {
  padding-top:10px;
}
</style>

